<template>
    <h2>排房信息显示页面</h2>
    <table border="1">
        <thead>
            <tr>
                <td>排房编号</td>
                <td>房号</td>
                <td>房型</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in info">
                <td>{{item.trO_Id}}</td>
                <td>{{item.trN_Name}}</td>
                <td>{{item.trT_Name}}</td>
                <td>
                    <input type="button" value="删除" @click="Shan(item.trO_Id)"/>
                    <input type="button" value="详情" @click="Xiang(item.trO_Id)"/>
                </td>
            </tr>
        </tbody>
    </table>

    总共有{{pageinfo.pageCount}}页
    总共有{{pageinfo.totalCount}}条数据
    当前在{{pageinfo.PageIndex}}/{{pageinfo.pageCount}}页

    <a href="#" style="margin-left:10px;" @click="FanYe('F')">首页</a>
    <a href="#" style="margin-left:10px;" @click="FanYe('L')">上一页</a>
    <a href="#" style="margin-left:10px;" @click="FanYe('N')">下一页</a>
    <a href="#" style="margin-left:10px;" @click="FanYe('E')">尾页</a>

    <select v-model="newye" @change="YeMa" style="margin-left:10px;">
        <option :value="1">1/页</option>
        <option :value="2">2/页</option>
        <option :value="3">3/页</option>
        <option :value="4">4/页</option>
    </select>

    <input type="tetx" v-model="index" style="width:50px;margin-left:10px;"/>
    <input type="button" value="跳转" @click="Tiao" style="margin-left:10px;"/>

</template>
<script setup lang="ts">
    import {ref,onMounted} from 'vue';
    import axios from 'axios';
    import {useRoute,useRouter} from 'vue-router';
    const route=useRoute();
    const router=useRouter();
    import moment from "moment";

    onMounted(()=>{
        Show();
    })

    const info=ref([{
        trN_Name:"",
        trT_Name:"",
        trO_Id:0
    }]);

    const pageinfo=ref({
        PageIndex:1,
        PageSize:2,
        totalCount:0,
        pageCount:0
    });

    //显示
    const Show=()=>{
        axios.get("https://localhost:7038/api/RoomOrder/GetOrder",{
            params:{
                PageSize:pageinfo.value.PageSize,
                PageIndex:pageinfo.value.PageIndex
            }
        })
        .then(res=>{
            info.value=res.data.page_Info;
             pageinfo.value.totalCount=res.data.totalCount;
            pageinfo.value.pageCount=res.data.pageCount;
        })
        .catch(err=>{
            console.log(err);
        })
    }

    //翻页
    const FanYe=(choose:any)=>{
        switch(choose){
            case 'F':
                pageinfo.value.PageIndex=1;
            break;
            case 'L':
                if(pageinfo.value.PageIndex<1+1){
                    alert('已经是第一页啦');
                    return;
                }
                pageinfo.value.PageIndex--;
            break;
            case 'N':
                if(pageinfo.value.PageIndex>pageinfo.value.pageCount-1){
                    alert('已经是最后一页啦');
                    return;
                }
                pageinfo.value.PageIndex++;
            break;
            case 'E':
                pageinfo.value.PageIndex=pageinfo.value.pageCount;
            break;
        }
        Show();
    }

    const newye=ref(0);
    //每页多少条
    const YeMa=()=>{
        pageinfo.value.PageSize=newye.value;
        Show();
    }

    const index=ref(0);
    //跳转页
    const Tiao=()=>{
        pageinfo.value.PageIndex=index.value;
        Show();
    }

    //删除
    const Shan=(id:number)=>{
        if(confirm("确定要删除吗？")){
            axios.get("https://localhost:7038/api/RoomOrder/Shan",{
            params:{
                id:id
            }
        })
        .then(res=>{
            if(res.data>0){
                alert('删除成功');
                Show();
            }
            else{
                alert('删除失败');
            }
        })
        }
    }

    //详情
    const Xiang=(id:number)=>{
        router.push({
            name:"XiangQing",
            params:{
                id:id
            }
        })
    }

</script>
